<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>css3Transform</title>
<style>
.box{ display:inline;
      float:left; 
      width:100px;
      height:100px;
      border:1px solid black; 
      margin: 1px 5px;   
}
#box1{transform: rotate(30deg); 
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
#box2{transform: translate(50px,100px); 
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(20px,30px); /* Safari and Chrome */
} 
#box3{transform: scale(2,4); 
-ms-transform: scale(2,4); /* IE 9 */  
-webkit-transform: scale(.9,1.5); /* Safari and Chrome */
}
#box4{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
#box5{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
</head>
<body>
<h1>css3Transform</h1> 
<div class="box" id="box1">box1 rotate(30deg)</div>
<div class="box" id="box2">box2 translate(20px,30px)</div>
<div class="box" id="box3">box3 scale(.9,1.5)</div>
<div class="box" id="box4">box4 skew(30deg,20deg)</div>
<div class="box" id="box5">box5 matrix(0.866,0.5,-0.5,0.866,0,0)</div>
</body>
</html>